import React from 'react'
import cx from 'classnames'
import style from './style'
import IconFont from '../iconFont'
import Link from '../link'

class Menu extends React.Component {

	constructor(props) {
		super(props)
		this.state = {
			active: 0
		}

		this.width = props.width || 120
		this.height = props.height || 28
	}

	renderItem(v, i) {
		return (
			<li onClick={v.handler} key={i}>
				<span>
					{
						v.value?
						<IconFont value={v.value}/>
						: null
					}
					<span>{v.name}</span>
				</span>
			</li>
		)
	}

	active() {
		this.setState({
			active: 1
		})
		const unbind = () => {
			setTimeout(() => {
				this.setState({
					active: 0
				})
			}, 150)
			document.removeEventListener('click', unbind)
		}
		document.addEventListener('click', unbind)
	}

	render() {
		const { 
			icon, 
			label, 
			size, 
			lowerRight, 
			lowerLeft, 
			topLeft,
			topRight,
			bottom,
			className, 
			data=[] } = this.props
		let pos
		if (lowerRight) {
			pos = {
				top: '100%',
				right: 0
			}
		} else if (lowerLeft) {
			pos = {
				top: 0,
				left: 0
			}
		} else if (topLeft) {
			pos = {
				bottom: 0,
				left: 0
			}
		} else if (topRight) {
			pos = {
				bottom: 0,
				right: 0
			}
		} else if (bottom) {
			pos = {
				top: 0,
				left: 0
			}
		}
		let height, width
		if (data.length) {
			height = `${data.length * this.height}px`
			width = `${this.width}px`
		} else {
			height = `${this.height}px`
			width = `${this.width}px`
		}

		let clip
		if (this.state.active) {
			if (lowerLeft) {
				clip = `rect(0px ${width} ${height} 0px)`
			} else if (lowerRight) {
				clip = `rect(0px ${width} ${height} 0px)`
			} else if (topLeft) {
				clip = `rect(0px ${width} ${height} 0px)`
			} else if (topRight) {
				clip = `rect(0px ${width} ${height} 0px)`
			} else if (bottom) {
				clip = `rect(0px ${width} ${height} 0)`
			}
		} else {
			if (lowerLeft) {
				clip = 'rect(0 0 0 0)'
			} else if (lowerRight) {
				clip = `rect(0 ${width} 0 ${width})`
			} else if (topLeft) {
				clip = `rect(${height} 0 ${height} 0)`
			} else if (topRight) {
				clip = `rect(${height} ${width} ${height} ${width})`
			} else if (bottom) {
				clip = `rect(${width} 0 0 0)`
			}
		}

		const { children } = this.props
		return (
			<div
				className={cx({
					[className]: !!className,
					[style.root]: true,
					[style.lowerLeft]: lowerLeft,
					[style.lowerRight]: lowerRight,
					[style.topRight]: topRight,
					[style.topLeft]: topLeft,
					[style.bottom]: bottom,
					[style.show]: this.state.active
				})}
			>
				{
					children? (
						React.Children.map(children, (child, props) => {
							return (
								React.cloneElement(child, {
									onClick: this.active.bind(this)
								})
							)
						})
					): (
						<Link 
							size={size} 
							onClick={::this.active} 
							icon={icon === false? null: 'more'}
							label={label}
						/>
					)
				}
				<div style={{
						...pos,
						height,
						width
					}}>
					<div 
						style={{
							height,
							width,
							...pos,
              top: 0
						}}
						className={cx({
							[style.outline]: true,
							[style.scale]: this.state.active
						})}
					></div>
					{
						this.props.data?
						<ul 
							style={{
								width,
								height,
								clip
							}}
							className={cx({
								[style.active]: this.state.active,
								[style.body]: true
							})}
						>{data.map(::this.renderItem)}</ul>: null
					}
					{
						this.props.body? (
							<div 
								style={{
									width,
									height,
									clip
								}}
								className={cx({
									[style.active]: this.state.active,
									[style.body]: true
								})}
							>
								{ this.props.body() }
							</div>
						): null
					}
				</div>
			</div>
		)
	}
}

export default Menu
